<template>
    <el-dialog :model-value="dialogVisible" :close-on-click-modal="true" :before-close="handleClose" :title="isAdd === 'add' ? '新增枚举' : '修改枚举'" append-to-body width="680px">
        <el-form ref="formRef" :model="formData" :inline="true" :rules="rules" label-width="84px">
            <el-form-item label="编号" prop="id" v-if="isAdd !== 'add'">
                <el-input v-model="formData.id" placeholder="编号" :disabled="true"/>
            </el-form-item>
            <el-form-item label="枚举名称" prop="dictTypeName">
                <el-input v-model="formData.dictTypeName" clearable placeholder="请输入枚举名称" />
            </el-form-item>
            <div class="el-divider"></div>
            <el-form-item>
                <el-button type="primary" size="small" @click="addChild">新增枚举枚举明细</el-button>
            </el-form-item>
            <el-table :data="tableData" border style="width: 100%;margin-bottom: 10px">
                <el-table-column label="值" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.dictCode" clearable placeholder="请输入值"/>
                    </template>
                </el-table-column>
                <el-table-column label="名称" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.dictName" clearable placeholder="请输入名称"/>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="120">
                    <template #default="scope">
                        <el-button
                        type="danger"
                        size="small"
                        @click.prevent="deleteRow(scope.$index)"
                        >
                        删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button :loading="loading" type="primary" @click="submit()">确定</el-button>
                <el-button @click="handleClose">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script  setup>
import { ElMessage } from 'element-plus'
// eslint-disable-next-line no-unused-vars
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    isAdd: {
        type: String,
        default: 'add'
    },
    formData: {
        type: Object,
        default: ()=>{}
    }
})
watch(() => props.formData,(newVal) => {
    if(props.isAdd === "add"){
        tableData.value = []
    }else{
        tableData.value = newVal.dictVOList
    }  
})
const emit = defineEmits(['on-submit', 'handleClose'])
const formRef = ref(null)
const tableData = ref([])
const rules = reactive({
    id: [
        {
            required: true,
            message: '编号不能为空',
            trigger: 'blur'
        }
    ],
    dictTypeName: [
        {
            required: true,
            message: '请输入枚举名称',
            trigger: 'blur'
        }
    ]
})
const loading = ref(false)
const handleClose = () => {
    formRef.value.resetFields()
    tableData.value = []
    emit('handleClose',false)
}
const submit = () => {
    if (!formRef) return
    formRef.value.validate(valid => {
        if (valid) {
            if(tableData.value.length <= 0){
                ElMessage({
                    type: 'error',
                    message: '枚举明细不能为空'
                });
                return
            }else{
                (tableData.value || []).forEach((item)=>{
                    if(!item.dictCode){
                        ElMessage({
                            type: 'error',
                            message: '值不能为空'
                        });
                        return
                    }
                    if(!item.dictName){
                        ElMessage({
                            type: 'error',
                            message: '名称不能为空'
                        });
                        return
                    }
                })
            }
            props.formData.dictParamList = tableData.value
            emit('on-submit', props.formData)
            handleClose()
        } else {
            return false
        }
    })
}

const addChild = ()=> {
    const newObj = {
        dictCode: '',
        dictName: '' 
    }
    tableData.value.push(newObj)
}
const deleteRow = (val)=>{
    tableData.value.splice(val, 1);
}
</script>

<style lang="scss" scoped>
.dialog-footer{
    text-align: right;
}
.el-divider{
    background-color: #DCDFE6;
    position: relative;
    display: block;
    height: 1px;
    width: 100%;
    margin: 10px 0 24px 0;
}
</style>